<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <style>
    body {
      width: 300px;
      padding: 15px;
      font-family: Arial, sans-serif;
    }
    .form-group {
      margin-bottom: 15px;
    }
    label {
      display: block;
      margin-bottom: 5px;
      font-weight: bold;
    }
    input, textarea, select {
      width: 100%;
      padding: 8px;
      border: 1px solid #ddd;
      border-radius: 4px;
      box-sizing: border-box;
    }
    button {
      width: 100%;
      padding: 10px;
      background-color: #4CAF50;
      color: white;
      border: none;
      border-radius: 4px;
      cursor: pointer;
    }
    button:hover {
      background-color: #45a049;
    }
    .result {
      margin-top: 10px;
      padding: 10px;
      border-radius: 4px;
      display: none;
    }
    .success {
      background-color: #d4edda;
      color: #155724;
      border: 1px solid #c3e6cb;
    }
    .error {
      background-color: #f8d7da;
      color: #721c24;
      border: 1px solid #f5c6cb;
    }
  </style>
</head>
<body>
  <div class="form-group">
    <label for="selectorType">选择方式:</label>
    <select id="selectorType">
      <option value="text">按文本内容</option>
      <option value="class">按CSS类名</option>
      <option value="id">按ID</option>
      <option value="custom">自定义选择器</option>
    </select>
  </div>

  <div class="form-group">
    <label for="selectorValue">选择器值:</label>
    <input type="text" id="selectorValue" placeholder="输入文本、类名、ID或自定义选择器">
  </div>

  <div class="form-group">
    <label for="newContent">新内容:</label>
    <textarea id="newContent" rows="3" placeholder="输入要替换的新内容"></textarea>
  </div>

  <div class="form-group">
    <label for="replaceMode">替换模式:</label>
    <select id="replaceMode">
      <option value="all">替换所有匹配项</option>
      <option value="first">仅替换第一个</option>
    </select>
  </div>

  <button id="changeContent">更改内容</button>
  
  <div id="result" class="result"></div>

  <script src="popup.js"></script>
</body>
</html>